import { useEffect, useState } from 'react'
import { TeamOutlined, MessageOutlined, MoneyCollectOutlined, ShoppingCartOutlined } from '@ant-design/icons'

import LineChart from './echarts/LineChart'
import RaddarChart from './echarts/RaddarChart'
import PieChart from './echarts/PieChart'
import BarChart from './echarts/BarChart'
import './style.scss'

const expectedData = [100, 120, 161, 134, 105, 160, 165]
const actualData = [120, 82, 91, 154, 162, 140, 100]

export default () => {
  const [expectedList, setExList] = useState([])
  const [actualList, setAcList] = useState([])

  useEffect(() => {
    setTimeout(() => {
      setExList(expectedData)
      setAcList(actualData)
    }, 200)
  }, [])

  return (
    <div className="admin">
      <div className='statistics'>
        <div className='card-panel'>
          <div className='icon-wrap'><TeamOutlined /></div>
          <div className='description'>
            <div className='title'>New Visits</div>
            <div className='num'>102,400</div>
          </div>
        </div>
        <div className='card-panel'>
          <div className='icon-wrap'><MessageOutlined /></div>
          <div className='description'>
            <div className='title'>Messages</div>
            <div className='num'>81,212</div>
          </div>
        </div>
        <div className='card-panel'>
          <div className='icon-wrap'><MoneyCollectOutlined /></div>
          <div className='description'>
            <div className='title'>Purchases</div>
            <div className='num'>9,280</div>
          </div>
        </div>
        <div className='card-panel'>
          <div className='icon-wrap'><ShoppingCartOutlined /></div>
          <div className='description'>
            <div className='title'>Shoppings</div>
            <div className='num'>13,600</div>
          </div>
        </div>
      </div>
      <div className='lineChart'>
        <LineChart
          expectedList={expectedList}
          actualList={actualList}
        />
      </div>
      <div className='charts'>
        <div><RaddarChart /></div>
        <div><PieChart /></div>
        <div><BarChart /></div>
      </div>
    </div>
  )
}
